2oneweek.dev

01. React란? (feat. webpack, css)

July 4, 2021

    Tags

  • React
01. React란? (feat. webpack, css) thumbnail

React

리액트는 프레임워크가 아니라 UI 라이브러리다. 그래서 하나의 웹 어플리케이션을 완성하기 위해선 여러 라이브러리를 사용하게 된다.

출처 : https://mk-v1.kakaocdn.net/dn/if-kakao/conf2019/conf_video_2019/1_104_01_m1.mp4 라이브러리 뿐만 아니라, CSS를 작성하는 방법도 고민해서 사용해야 한다.

  • 순수함수와 불변 변수를 사용하면 복잡도가 낮아지고 렌더링 성능을 크게 항샹시킬 수 있다.

    • 순수함수 : 랜덤 함수를 사용하지 않고, 함수 내에서 외부의 상태를 변경하지 않는다.
    • 불변 변수 : state는 불변 변수로 한다. 객체가 상태라면 속성값을 바꾸는 것이 아니라, 객체 자체를 새로 만들어서 바꾼다.

  • React의 장점은 가상돔을 사용해서 UI를 빠르게 업데이트 한다. 가상돔은 이전 UI상태를 메모리에 유지해서, 변경된 부분만 실제 돔에 반영해주는 기술이다. 불필요한 UI 업데이트를 줄여 성능이 좋아진다.

    • 그러나 가상 돔 덕분에 바닐라 자바스크립트나, 다른 프레임워크보다 더 빠르다고 이해하면 안된다. 순수 JS로 프로젝트에 맞게 최적화를하면 더 빠를 수 있다. 즉 프로젝트 성격에 따라 성능 최적화 방법은 다르다.


Babel

  • 초기에 ES6 문법을 ES5로 변환해주는 것으로 사용했는데, 현재는 주석을 제거하거나 코드를 압축해주는 것으로 사용한다.

  • 리액트에서는 jsx 문법을 js로 변환해주기 위해 사용한다.

  • 바벨에는 프리셋과 플러그인이라는 개념이 있다.

    • 플러그인 : 어떤 특정 문법에 대한 변환 기능
    • 프리셋 : 플러그인의 집합 @babel/preset-react


Webpack

  • 파일 내용을 기반으로, 파일 이름에 해시 값을 추가해 줌

    • 이것은 효율적으로 브라우저 캐싱을 이용할 수 있게 해준다. etag를 이용했을 때는 서버에게 이 캐시를 사용해도 되는지 물어보는 단계가 있는데, Webpack은 파일 이름 자체를 해시의 키로 사용하기 때문에, 서버에게 물어보는 단계가 필요 없어, 효율적으로 캐싱을 사용할 수 있다.

  • 사용되지 않는 코드를 제거하거나 js파일을 압축해주는 기능이 있다.(번들링)

  • 자바스크립트에서 CSS,JSON, 텍스트 파일등을 JS 모듈처럼 불러올 수 있게 해준다.

  • 환경변수를 주입해주는 기능 등이 있다.

  • Webpack을 사용하는 가장 큰 이유는 모듈 시스템을 사용하기 위함이다. 대표적인 모듈 시스템으로 ESM, CommonJS가 있는데, ESM은 ES6에서 추가된 것이고 CommonJS는 Node 환경에서 많이 사용된다.

  • Webpack을 사용하기 전에는 여러 문제가 있었다.

    1. 여러개의 script 태그로 js 파일을 불러왔다.
    2. 어떤 스크립트 파일에서 전역 변수를 선언해버린 경우, 다른 파일에 그와 이름이 같은 변수를 사용할 때 문제가 생길 수도 있다. 즉, 선언된 자바스크립트 파일 순서에 따라서 동작이 달라질 수도 있다.
    3. jquery와 같은 외부 라이브러리를 사용할 때 그 파일을 서비스하는 cdn 주소를 입력하게 되는데, 이 때 해당 cdn에 문제가 발생하면 우리 서비스 자체에도 문제가 생길 수 있었다.

  • webpack을 사용하면, 이러한 문제들을 대부분 잡아준다. 변수 이름 충돌 문제는 빌드 단계에서 잡아낼 수 있으며, 외부 라이브러리는 npm으로 관리하기 쉬워졌다.

  • 요즘 브라우저는 ESM을 지원한다. 웹팩을 사용하지 않고도 ESM 문법을 사용할 수 있는데, 오래된 브라우저도 지원해야되며, 많은 라이브러리가 CommonJS로 작성되었다는 문제가 있다. 따라서 Webpack을 사용해야 한다.



CSS 작성 방법

CSS 파일 작성

  • .css 파일을 작성하고, 사용하는 곳에서 import하는 방식이다.
  • 브라우저에 보여질 때 결국 하나의 파일로 합쳐지게 되는데, 이때 이름이 겹치는 것이 있으면 충돌이 일어난다는 단점이 있다.

CSS-MODULE로 작성

  • css-module을 사용하면, 이름 충돌 문제를 해결할 수 있다.
  • .module.css 확장자로 파일을 만들어 놓으면 된다.
  • 빌드를 하면, 식별자에 해쉬가 붙어서 이름 충돌이 해결 된다.

Sass로 작성

  • css와 비슷하지만, 별도의 문법을 가지고 있다.
  • 변수와 믹스인을 사용하면, 스타일 코드를 재사용 할 수 있다.

css-in-js로 작성

  • css 코드가 JS 안에서 관리되기 때문에 CSS 코드도 JS 코드처럼 재사용이 가능하다.
  • 또 동적으로 CSS코드를 작성할 수 있다.


SPA

Multi Page Application

  • 클라이언트가 초기 요청을하면, 서버는 html을 내려준다.
  • 이후 페이지 전환이 필요할 때, 다시 서버에 요청을하고 서버는 응답으로 html을 내려준다.
  • 이것을 계속 반복한다.

Single Page Application

  • 클라이언트가 초기 요청을하면, 서버는 html을 내려주는 것은 MPA와 같다.
  • 이후 페이지 전환 요청이 있으면, 서버로 항상 요청하는 것이 아니고, 필요할 때 "데이터"만 받아온다.
  • 페이지 전환은 자체적으로 라우팅을 한다.

SPA를 만들기 위한 조건

  • 자바스크립트에서 브라우저로 페이지 전환 요청을 보낼 수 있어야 한다. 이때 브라우저는 서버로 요청을 보내지 않아야 한다.
  • 브라우저의 뒤로 가기와 같은 사용자의 페이지 전환 요청을 자바스크립트에서 처리해야 한다. 이때도 브라우저는 서버에 요청을 보내지 않아야 한다.

위 조건을 만족하기 위한 브라우저 API가 있다.

  • pushState(), replaceState() 함수 자바스크립트 코드 상에서 페이지 전환을 하고 싶을 때 브라우저에게 페이지 전환 이벤트를 알려주려면, 위의 함수를 호출해야 한다.
  • popState 이벤트 반대로, 사용자가 브라우저 GUI를 통해 페이지 전환 요청을 한다면, 브라우저는 자바스크립트로 페이지 전환 이벤트를 알려줘야 한다. 이때 브라우저는 popState 이벤트로 JS에게 알려준다.
Written by@2-one-week
현재 블로그 개발 중

GitHubLinkedIn